Hệ thống xếp lịch học tín chỉ cho sinh viên CNTT trên PHP & MySQL
112.089 lượt xem;
1 // Chart.js scripts
2 // -- Set new default font family and font color to mimic Bootstrap's default styling
3 Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
4 Chart.defaults.global.defaultFontColor = '#292b2c';
5 // -- Area Chart Example
6 var ctx = document.getElementById("myAreaChart");
7 var myLineChart = new Chart(ctx, {
8 type: 'line',
9 data: {
10 labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
11 datasets: [{
12 label: "Sessions",
13 lineTension: 0.3,
14 backgroundColor: "rgba(2,117,216,0.2)",
15 borderColor: "rgba(2,117,216,1)",
16 pointRadius: 5,
17 pointBackgroundColor: "rgba(2,117,216,1)",
18 pointBorderColor: "rgba(255,255,255,0.8)",
19 pointHoverRadius: 5,
20 pointHoverBackgroundColor: "rgba(2,117,216,1)",
21 pointHitRadius: 20,
22 pointBorderWidth: 2,
23 data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
24 }],
25 },
26 options: {
27 scales: {
28 xAxes: [{
29 time: {
30 unit: 'date'
31 },
32 gridLines: {
33 display: false
34 },
35 ticks: {
36 maxTicksLimit: 7
37 }
38 }],
39 yAxes: [{
40 ticks: {
41 min: 0,
42 max: 40000,
43 maxTicksLimit: 5
44 },
45 gridLines: {
46 color: "rgba(0, 0, 0, .125)",
47 }
48 }],
49 },
50 legend: {
51 display: false
52 }
53 }
54 });
55 // -- Bar Chart Example
56 var ctx = document.getElementById("myBarChart");
57 var myLineChart = new Chart(ctx, {
58 type: 'bar',
59 data: {
60 labels: ["January", "February", "March", "April", "May", "June"],
61 datasets: [{
62 label: "Revenue",
63 backgroundColor: "rgba(2,117,216,1)",
64 borderColor: "rgba(2,117,216,1)",
65 data: [4215, 5312, 6251, 7841, 9821, 14984],
66 }],
67 },
68 options: {
69 scales: {
70 xAxes: [{
71 time: {
72 unit: 'month'
73 },
74 gridLines: {
75 display: false
76 },
77 ticks: {
78 maxTicksLimit: 6
79 }
80 }],
81 yAxes: [{
82 ticks: {
83 min: 0,
84 max: 15000,
85 maxTicksLimit: 5
86 },
87 gridLines: {
88 display: true
89 }
90 }],
91 },
92 legend: {
93 display: false
94 }
95 }
96 });
97 // -- Pie Chart Example
98 var ctx = document.getElementById("myPieChart");
99 var myPieChart = new Chart(ctx, {
100 type: 'pie',
101 data: {
102 labels: ["Blue", "Red", "Yellow", "Green"],
103 datasets: [{
104 data: [12.21, 15.58, 11.25, 8.32],
105 backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
106 }],
107 },
108 });
2 // -- Set new default font family and font color to mimic Bootstrap's default styling
3 Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
4 Chart.defaults.global.defaultFontColor = '#292b2c';
5 // -- Area Chart Example
6 var ctx = document.getElementById("myAreaChart");
7 var myLineChart = new Chart(ctx, {
8 type: 'line',
9 data: {
10 labels: ["Mar 1", "Mar 2", "Mar 3", "Mar 4", "Mar 5", "Mar 6", "Mar 7", "Mar 8", "Mar 9", "Mar 10", "Mar 11", "Mar 12", "Mar 13"],
11 datasets: [{
12 label: "Sessions",
13 lineTension: 0.3,
14 backgroundColor: "rgba(2,117,216,0.2)",
15 borderColor: "rgba(2,117,216,1)",
16 pointRadius: 5,
17 pointBackgroundColor: "rgba(2,117,216,1)",
18 pointBorderColor: "rgba(255,255,255,0.8)",
19 pointHoverRadius: 5,
20 pointHoverBackgroundColor: "rgba(2,117,216,1)",
21 pointHitRadius: 20,
22 pointBorderWidth: 2,
23 data: [10000, 30162, 26263, 18394, 18287, 28682, 31274, 33259, 25849, 24159, 32651, 31984, 38451],
24 }],
25 },
26 options: {
27 scales: {
28 xAxes: [{
29 time: {
30 unit: 'date'
31 },
32 gridLines: {
33 display: false
34 },
35 ticks: {
36 maxTicksLimit: 7
37 }
38 }],
39 yAxes: [{
40 ticks: {
41 min: 0,
42 max: 40000,
43 maxTicksLimit: 5
44 },
45 gridLines: {
46 color: "rgba(0, 0, 0, .125)",
47 }
48 }],
49 },
50 legend: {
51 display: false
52 }
53 }
54 });
55 // -- Bar Chart Example
56 var ctx = document.getElementById("myBarChart");
57 var myLineChart = new Chart(ctx, {
58 type: 'bar',
59 data: {
60 labels: ["January", "February", "March", "April", "May", "June"],
61 datasets: [{
62 label: "Revenue",
63 backgroundColor: "rgba(2,117,216,1)",
64 borderColor: "rgba(2,117,216,1)",
65 data: [4215, 5312, 6251, 7841, 9821, 14984],
66 }],
67 },
68 options: {
69 scales: {
70 xAxes: [{
71 time: {
72 unit: 'month'
73 },
74 gridLines: {
75 display: false
76 },
77 ticks: {
78 maxTicksLimit: 6
79 }
80 }],
81 yAxes: [{
82 ticks: {
83 min: 0,
84 max: 15000,
85 maxTicksLimit: 5
86 },
87 gridLines: {
88 display: true
89 }
90 }],
91 },
92 legend: {
93 display: false
94 }
95 }
96 });
97 // -- Pie Chart Example
98 var ctx = document.getElementById("myPieChart");
99 var myPieChart = new Chart(ctx, {
100 type: 'pie',
101 data: {
102 labels: ["Blue", "Red", "Yellow", "Green"],
103 datasets: [{
104 data: [12.21, 15.58, 11.25, 8.32],
105 backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
106 }],
107 },
108 });
